import './Scss/MixingStation.scss'
import { Column, Gauge } from '@ant-design/plots'
import { useEffect, useRef, useState } from 'react'
import { Http } from '../../../../Common/Api'
import { useSize, useRequest, useBoolean } from 'ahooks'
import { LargeScreenTablesModal } from '../LargeScreen/LargeScreenModal'

import { WebTemplateUrl } from './configuration'

const ChartsTwo = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [data, setData] = useState([])
    const [Charts, setCharts] = useState()

    useEffect(() => {
        if (size) {
            const { width, height } = size
            const config = {
                autoFit: false,
                width,
                height,
                maxColumnWidth: 14,
                appendPadding: 24,
                data,
                isGroup: true,
                xField: 'type',
                yField: 'value',
                seriesField: 'name',
                color: ['#B2FBFD', '#FAD688'],
                legend: {
                    layout: 'horizontal',
                    position: 'top-right',
                    offsetY: 24,
                    itemName: { style: { fill: '#B2FBFD', fontSize: 12 } },
                },
                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    title: { text: '', position: 'end', autoRotate: false, offset: 50, style: { fill: '#B2FBFD' } },
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
            }
            setCharts(config)
        }
    }, [size, data])

    const { run: getGetCementMixingStationGroupInfoByOrg } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = []
            res.list.forEach(({ tableName, planCementConcrete, quantityAct, uuid, per }) => {
                data = [
                    ...data,
                    { name: '实际产量', type: tableName, value: quantityAct, uuid },
                    { name: '计划产量', type: tableName, value: planCementConcrete, uuid },
                ]
            })
            setData(data)
        },
    })

    useEffect(() => {
        getGetCementMixingStationGroupInfoByOrg({
            url: `getGetCementMixingStationGroupInfoByOrg`,
            data: { OrganizationGroupCode: 8 },
        })
    }, [getGetCementMixingStationGroupInfoByOrg])

    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [Parameter, setParameter] = useState()
    const [ParameterTitle, setParameterTitle] = useState()

    return (
        <div className="ChartsBox" ref={ChartsBox}>
            {Charts && (
                <Column
                    {...Charts}
                    onReady={plot =>
                        plot.on('plot:click', e => {
                            const { x, y } = e
                            const [{ data }] = plot.chart.getTooltipItems({ x, y })
                            setParameter({
                                uuid: data.uuid,
                                type: 'LargeScreeTable',
                                classification: 'CementMixingStationGroupDatail',
                            })
                            setParameterTitle('水泥产量明细列表')
                            setTrue()
                        })
                    }
                />
            )}
            {TowModal && Parameter && ParameterTitle && (
                <LargeScreenTablesModal
                    className="ItemTitle"
                    Off={setFalse}
                    title={ParameterTitle}
                    parameter={Parameter}
                />
            )}
        </div>
    )
}

export const MixingStation001 = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)

    const [OneData, setOneData] = useState([])
    const [data, setData] = useState([])
    const [Charts, setCharts] = useState()
    useEffect(() => {
        if (size) {
            const { width, height } = size
            const config = {
                autoFit: false,
                width,
                height,
                maxColumnWidth: 14,
                appendPadding: 24,
                data,
                isGroup: true,
                xField: 'type',
                yField: 'value',
                seriesField: 'name',
                color: ['#B2FBFD', '#FAD688'],
                legend: {
                    layout: 'horizontal',
                    position: 'top-right',
                    offsetY: 24,
                    itemName: { style: { fill: '#B2FBFD', fontSize: 12 } },
                },
                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    title: { text: '', position: 'end', autoRotate: false, offset: 50, style: { fill: '#B2FBFD' } },
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
            }
            setCharts(config)
        }
    }, [size, data])

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setOneData(res)
        },
    })
    const GaugeChartsSetUp = percent => {
        return {
            autoFit: false,
            height: 120,
            width: 240,
            percent,
            radius: 0.9,
            startAngle: Math.PI,
            endAngle: 2 * Math.PI,
            range: { color: ['l(0) 0:#F28159 1:#ADEEBA', 'rgba(58, 168, 226, 0.2)'], width: 27 },
            indicator: null,
            statistic: {
                title: {
                    offsetY: 0,
                    style: { fontSize: '50px', color: '#fff', fontWeight: 'bold', fontFamily: 'Bahnschrift' },
                    formatter: ({ percent }) => ` ${(percent * 100).toFixed(0)}%`,
                },
            },
            gaugeStyle: { lineCap: 'round' },
        }
    }
    const { run: getAsphaltMixingStationGroupInfoByOrg } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = []
            res.list.forEach(({ tableName, planBitulith, quantityAct, uuid, per }) => {
                data = [
                    ...data,
                    { name: '实际产量', type: tableName, value: quantityAct, uuid },
                    { name: '计划产量', type: tableName, value: planBitulith, uuid },
                ]
            })
            setData(data)
        },
    })

    useEffect(() => {
        runAsync({ url: 'getExceededGroupInfo' })
        getAsphaltMixingStationGroupInfoByOrg({
            url: `getAsphaltMixingStationGroupInfoByOrg`,
            data: { OrganizationGroupCode: 9 },
        })
    }, [runAsync, getAsphaltMixingStationGroupInfoByOrg])

    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [Parameter, setParameter] = useState()
    const [ParameterTitle, setParameterTitle] = useState()

    return (
        <div className="MixingStation001">
            <div className="Box">
                <div>
                    <div>沥青拌合站</div>
                    <div>
                        <div
                            onClick={() => {
                                setParameter({
                                    type: 'LargeScreeTable',
                                    classification: 'AsphaltMixingStationDetail',
                                    other: { project: false },
                                    uuid: 'temperature',
                                })
                                setParameterTitle('出料温度预警明细列表')
                                setTrue()
                            }}
                        >
                            <div>
                                <img src={WebTemplateUrl + 'ba005.png'} alt="" />
                                <div>{Math.round(OneData?.temperature).toString()}</div>
                            </div>
                            <div>出料温度预警</div>
                        </div>
                        <div
                            onClick={() => {
                                setParameter({
                                    type: 'LargeScreeTable',
                                    classification: 'AsphaltMixingStationDetail',
                                    other: { project: false },
                                    uuid: 'asphaltratio',
                                })
                                setParameterTitle('油石比预警明细列表')
                                setTrue()
                            }}
                        >
                            <div>
                                <img src={WebTemplateUrl + 'ba003.png'} alt="" />
                                <div>{Math.round(OneData?.asphaltratio).toString()}</div>
                            </div>
                            <div>油石比预警</div>
                        </div>
                        <div
                            onClick={() => {
                                setParameter({
                                    type: 'LargeScreeTable',
                                    classification: 'AsphaltMixingStationDetail',
                                    other: { project: false },
                                    uuid: 'sieve475',
                                })
                                setParameterTitle('4.75mm通过率预警明细列表')
                                setTrue()
                            }}
                        >
                            <Gauge {...GaugeChartsSetUp(OneData?.sieve475)} />
                            <div>4.75mm通过率</div>
                        </div>
                    </div>
                    <div className="TitleSmall">
                        <div>沥青产量 (kg) </div>
                        <div />
                    </div>
                    <div className="ChartsBox" ref={ChartsBox}>
                        {Charts && (
                            <Column
                                {...Charts}
                                onReady={plot =>
                                    plot.on('plot:click', e => {
                                        const { x, y } = e
                                        const [{ data }] = plot.chart.getTooltipItems({ x, y })
                                        setParameter({
                                            uuid: data.uuid,
                                            type: 'LargeScreeTable',
                                            classification: 'GettAsphaltMixingStationDatil',
                                            other: { project: true },
                                        })
                                        setParameterTitle('沥青产量明细列表')
                                        setTrue()
                                    })
                                }
                            />
                        )}
                    </div>
                </div>
                <div>
                    <div>水泥拌合站</div>
                    <div>
                        <div>
                            <div>
                                <img src={WebTemplateUrl + 'ba001.png'} alt="" />
                            </div>
                        </div>
                        <div
                            onClick={() => {
                                setParameter({
                                    type: 'LargeScreeTable',
                                    classification: 'CementMixingStationExceededDatil',
                                    other: { project: false },
                                    uuid: 'cement',
                                })
                                setParameterTitle('水泥用量预警明细列表')
                                setTrue()
                            }}
                        >
                            <div>
                                <img src={WebTemplateUrl + 'ba003.png'} alt="" />
                                <div>{Math.round(OneData?.cement).toString()}</div>
                            </div>
                            <div style={{ color: 'rgb(130, 224, 241)' }}>水泥用量预警</div>
                        </div>
                        <div
                            onClick={() => {
                                setParameter({
                                    type: 'LargeScreeTable',
                                    classification: 'CementMixingStationExceededDatil',
                                    other: { project: false },
                                    uuid: 'waterbinderratio',
                                })
                                setParameterTitle('水胶比预警明细列表')
                                setTrue()
                            }}
                        >
                            <Gauge {...GaugeChartsSetUp(OneData?.waterbinderratio)} />
                            <div style={{ color: 'rgb(130, 224, 241)' }}>水胶比</div>
                        </div>
                    </div>
                    <div className="TitleSmall">
                        <div>水泥产量 (m³) </div>
                        <div />
                    </div>
                    <ChartsTwo />
                </div>
            </div>
            {TowModal && Parameter && ParameterTitle && (
                <LargeScreenTablesModal
                    className="ItemTitle"
                    Off={setFalse}
                    title={ParameterTitle}
                    parameter={Parameter}
                />
            )}
        </div>
    )
}
